<template>
	<view class="login">
		<view class="app-title">
			<text>welcome</text>
		</view>
		<view class="box-form">
			<u-form>
				<u-form-item>
					<u--input placeholder="请输入账号" border="surround" v-model="model.account" />
				</u-form-item>
				<u-form-item>
					<u--input placeholder="请输入密码" border="surround" password v-model="model.password" />
				</u-form-item>
				<u-form-item>
					<u-input placeholder="验证码" border="surround" v-model="model.code">
						<view slot="suffix">
							<u-image :src="captchaImg" height="24px" width="80px" mode="heightFix" @click="handleGenImage"></u-image>
						</view>
					</u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="box-submit">
			<u-button type="success" :loading="loading" @click="handleLogin" shape="circle">登录</u-button>
		</view>
		<view class="footer">
			<text>艺术作品集 @ 管理后台</text>
		</view>
	</view>
</template>

<script>
	import { encrypt } from '@/utils/login.js'

	export default {
		data() {
			return {
				model: {
					account: '',
					password: '',
					code: '',
					codeId: ''
				},
				captchaImg: '',
				loading: false
			}
		},
		created() {
			this.handleGenImage()
			// console.log(this)
		},
		methods: {
			handleGenImage() {
				uni.$u.http.get('/api/SysAuth/Captcha').then(response => {
					let { id, img } = response.data.result
					this.model.codeId = id
					// console.log(img)
					this.captchaImg = `data:image/png;base64,${img}`
				})
			},
			handleLogin() {
				let data = { ...this.model }
				data.password = encrypt(data.password) // 加密结果
				this.loading = true
				uni.$u.http.post('/api/SysAuth/login', data).then(response => {
					let { code, message } = response.data
					if (code != 200) {
						this.$u.toast('登录失败：' + message)
						console.log(code, message)
						this.handleGenImage()
						return
					}
					let { accessToken, refreshToken } = response.data.result
					this.$u.vuex('token', accessToken)
					this.$u.route({
						url: '/pages/manage/dashboard/dashboard',
						type: 'reLaunch'
					})
					this.$u.toast('登录成功！')
					// console.log(accessToken, refreshToken)
				}).finally(() => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.login {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-content: center;
		border: 0px solid #FF0000;
		box-sizing: border-box;
		padding-top: 30%;
		height: 100vh;
	}

	.app-title {

		border: 0px solid #096;
		font-size: 58upx;
		text-align: center;
	}

	.box-submit {
		border: 0px solid #096;
		font-size: 48upx;
		text-align: center;
		padding: 5px 30upx;
	}

	.box-form {
		border: 0px solid #096;
		height: 450upx;
		width: 700upx;
		padding: 25upx;
	}

	.footer {
		position: fixed;
		height: 100upx;
		text-align: center;
		color: #808080;
		font-size: 24upx;
		bottom: 5px;
		width: 100%;
		border: 0px solid #096;
	}
</style>